import React from 'react';
import Base from '@/components/Base';
import {
  Button,
  Card,
  Form,
  Radio,
  Input,
  Badge,
  Select,
  Table,
  Modal,
  message,
  Popover,
} from 'antd';
import { View, Text, KayButton } from '@/components';
import styles from './index.less';

import intf from '@/modules/interface';
const { gsap, Flip } = intf;

interface State {
  show?: boolean;
}
interface Props {}

export default class IndexMenu extends Base<Props, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    this.init();
  }

  public render() {
    const { show } = this.state;
    return (
      <React.Fragment>
        <View
          className={this.cx(styles.menu, {
            [styles.show]: show,
          })}
        >
          <View className={styles.item} onClick={this.toggleMenu}>
            <Text type="h4" className={this.cx(styles.txt, styles.txt1)}>
              <span attr-text="M">M</span>
              <span attr-text="E">E</span>
              <span attr-text="N">N</span>
              <span attr-text="U">U</span>
            </Text>
            <Text type="h4" className={this.cx(styles.txt, styles.txt2)}>
              <span attr-text="C">C</span>
              <span attr-text="L">L</span>
              <span attr-text="O">O</span>
              <span attr-text="S">S</span>
              <span attr-text="E">E</span>
            </Text>
          </View>
        </View>
        <View
          className={this.cx(styles.menuCover, {
            [styles.show]: show,
          })}
          gsap-menu-id="cover"
          onMouseMove={this.onMouseMv}
        >
          <View className={styles.bg} gsap-menu-id="bg"></View>
          <View className={styles.ball} gsap-menu-id="ball"></View>
          <View className={styles.menuRow}>
            <View className={styles.ul}>
              <View
                className={styles.li}
                onClick={() => {
                  // this.navigator.push('test', { param: '111' });
                  this.navigator.push('button3d');
                }}
              >
                <Text type="h3" className={styles.txt} attr-text="学习中心">
                  学习中心
                </Text>
              </View>
              {this.AppConfig.ENV == 'development' && (
                <View
                  className={styles.li}
                  onClick={() => {
                    this.navigator.push('constructor');
                  }}
                >
                  <Text type="h3" className={styles.txt} attr-text="二建考试">
                    二建考试
                  </Text>
                </View>
              )}
            </View>
            <View className={styles.ul}>
              <View
                className={styles.li}
                onClick={() => {
                  this.navigator.link('douyinMy');
                }}
              >
                <Text type="h6" className={styles.txt} attr-text="我的抖音">
                  我的抖音
                </Text>
              </View>
              <View
                className={styles.li}
                onClick={() => {
                  this.navigator.link('csdnMy');
                }}
              >
                <Text type="h6" className={styles.txt} attr-text="我的CSDN">
                  我的CSDN
                </Text>
              </View>
              <View
                className={styles.li}
                onClick={() => {
                  this.navigator.link('jianshuMy');
                }}
              >
                <Text type="h6" className={styles.txt} attr-text="我的简书">
                  我的简书
                </Text>
              </View>
            </View>
          </View>
        </View>
      </React.Fragment>
    );
  }

  private quickAniX: Function = () => {};
  private quickAniY: Function = () => {};
  private init = () => {
    gsap.set("[gsap-menu-id='ball']", {
      xPercent: -50,
      yPercent: -50,
      x: window.innerWidth,
    });

    this.quickAniX = gsap.quickTo("[gsap-menu-id='ball']", 'x', {
      duration: 0.6,
      ease: 'power3',
    });
    this.quickAniY = gsap.quickTo("[gsap-menu-id='ball']", 'y', {
      duration: 0.6,
      ease: 'power3',
    });
  };
  private onMouseMv = (e) => {
    this.quickAniX(e.clientX);
    this.quickAniY(e.clientY);
  };

  private toggleMenu = () => {
    const { show } = this.state;
    // gsap.to("[gsap-menu-id='cover']", {
    //   duration: 0.5,
    //   opacity: show? 0: 1,
    //   display: show? 'none': 'flex'
    // });

    this.setState({
      show: !show,
    });
  };
}
